import React, { useState, useEffect } from 'react';
import { Form, Input, Select, Button, Row, Col, message, Icon } from 'antd';
import { connect, history } from 'umi';

const { Option } = Select;

const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};

const { Item } = Form;
const width = {
    width: '100%',
};
const KeywordForm = ({ ProductEditDetail: { pcategoryOption,productDetail }, row, idx, dispatch, updateNewsCb }) => {
    const [form] = Form.useForm();
    useEffect(() => {
        form.setFieldsValue({
            kwd_word: row
        });
    }, []);
    const onFinish = (values) => {
        console.log('Received values from form: ', values);
        const formData = {
            keyword: values.kwd_word,
            category: values.categoryOption.label,
            category_id: values.categoryOption.value
        }
        dispatch({
            type: 'ProductEditDetail/reqKeywordMatch',
            payload: formData,
            callback: (res) => {
                message.info(res.message);
            }
        });

        // 更新 当前新闻 所属分类
        updateNewsCb && updateNewsCb(formData);
    };

    const ignoreClick = () => {
        dispatch({
            type: 'ProductEditDetail/ignoreNews',
            payload: {
                id:productDetail._id
            },
            callback: (res) => {
                message.info(res.message);
            }
        });
    }


    return (
        <>
            <Form form={form} {...formItemLayout} onFinish={onFinish}><Row >
                <Col span={8}>
                    <Item
                        label={`关键字${idx + 1}`}
                        name="kwd_word"
                        rules={[{ required: true, message: '必填', }]}
                    >
                        <Input style={width} placeholder={row} />
                    </Item>
                </Col>
                <Col span={8}>
                    <Item
                        label="领域分类"
                        name="categoryOption"
                        rules={[{ required: true, message: '必填' }]}
                    >
                        <Select
                            placeholder="请选择领域"
                            labelInValue
                        >
                            {
                                pcategoryOption.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })
                            }
                        </Select>
                    </Item>
                </Col>
                <Col span={8} style={{ textAlign: 'left' }}>
                    <Button type="primary" htmlType="submit">确认</Button>

                    <a style={{ marginLeft: 12, fontSize: 14,cursor: 'pointer'}} onClick={ignoreClick}>
                        忽略 <Icon type={'up'}/>
                    </a>

                </Col>
            </Row></Form>

        </>
    );
};

export default connect(({ ProductEditDetail, dispatch, loading }) => ({
    ProductEditDetail,
    dispatch,
    loading: loading.effects['ProductEditDetail/getProductDetail'],
}))(KeywordForm);
